<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小餐厅 - 登录</title>
    <script src="lib/constant.js"></script>
    <script src="lib/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <style>
        .myFormItem{
            width: 85%;
            margin-top: 20px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div style="width:100%;display: flex;flex-direction: column;align-items: center;justify-content: center;padding-top: 30px;margin-bottom:15px;">
        <h1>欢迎登录</h1>
    </div>
    <div class="layui-form-item myFormItem">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input type="number" id="tele" placeholder="请输入手机号" autocomplete="off" class="layui-input" maxlength="11" minlength="11">
        </div>
    </div>
    <div class="layui-form-item myFormItem">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="password" id="pass" placeholder="请输入密码" autocomplete="off" class="layui-input" maxlength="16">
        </div>
    </div>
    <div class="layui-form-item" style="text-align: center;">
        <button id="submit" class="layui-btn" onclick="userLogin()" style="padding-left: 30px;padding-right: 30px;margin:auto;width: 200px;">登录</button>
    </div>
    <div class="layui-form-item" style="text-align: center;font-size: 12px;">
        <span><a href="registe.html" style="color: #01AAED">没有账号？点击注册</a></span>
    </div>
</body>
<script>
    function check(tele,pass) {
        if(tele.length!=11||tele.substr(0,1)!="1"){
            alert("手机号格式错误!");
            return false;
        }
        if(pass.length<6){
            alert("密码格式错误!");
            return false;
        }
        return true;
    }

    function userLogin() {
        let tele=$("#tele").val().trim();
        let pass=$("#pass").val().trim();
        if(check(tele,pass)){
            $.ajax({
                type:'post',
                url: RequestURL+"/userLogin",
                data: {
                    "tele": tele,
                    "pwd": pass
                },
                success: function(data) {
                    if(data===200){                     //如果接受到后端返回的200，判定成功并重定向到主界面
                        alert('登录成功');
                        window.location.href="user/home.html";
                    }else{
                        alert('用户名/密码错误');
                    }
                }
            });
        }
    }
</script>
</html>